<template>
    <view class="new">
        <view class="title">
            <view>
                <span style="text-align: center;">hello,欢迎注册</span>
            </view>
            <view style="margin-top: 20rpx;">
                <span>GD小店祝您每天开心(*^▽^*)</span>
            </view>
        </view>
        <view class="form">
            <view class="form">
				<input class="uni-input" v-model="username" type="text" placeholder="请输入用户名" @blur="checkUsername"/>
                <input class="uni-input" v-model="password" password type="text" placeholder="请输入密码" @blur="checkPwd"/>
				<input class="uni-input" v-model="rePassword" password type="text" placeholder="请再次输入密码" @blur="checkRePwd"/>
				<input class="uni-input" v-model="email" type="text" placeholder="请输入邮箱" @blur="checkEmail"/>
				<input class="uni-input" v-model="mobile" type="text" placeholder="请输入手机号码" @blur="checkMobile"/>
            </view>
        </view>
        <view class="btn">
            <button @tap="addnUser">立即注册</button>
            <view class="tip">
                <text type="primary" @click="addlogin">已有账号,前往登录</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                password: "",
				rePassword: '',
				email: "",
				mobile: "",
				username: '',
				imageSrc: '../../../static/images/错误.png',
				canResgister: 0,
            }
        },
        methods: {
            addlogin(){
                uni.navigateTo({
                    url: "/pages/login/login"
                })
            },
			checkUsername(){
				let that = this;
				if(that.username == '') {
					uni.showToast({
						title: '用户名为空!',
						icon: 'none'
					})
				} else{
					uni.request({
						url: 'http://localhost:8080/api/checkUsername',
						method: 'POST',
						data: that.username,
						header: {
							'Content-Type': 'application/json',
						},
						success: (res) => {
							if(res.statusCode == 200) {
								if(res.data.data.code == "-1") {
									that.canResgister += 1;
									uni.showToast({
										title: res.data.data.msg,
										icon: 'none'
									})
								} else {
									that.canResgister = true;
								}
							}
						}
					})
				}
			},
			checkPwd(){
				let that = this;
				if(that.password == '') {
					uni.showToast({
						title: '密码为空!',
						icon: 'none'
					})
				} else {
					that.canResgister += 1;
				}
			},
			checkRePwd(){
				let that = this;
				if(that.password == '') {
					uni.showToast({
						title: '请先输入密码',
						icon: 'none'
					})
				} else {
					if(that.rePassword !== that.password) {
						uni.showToast({
							title: '两次密码输入不一致!',
							icon: 'none'
						})
					} else {
						that.canResgister += 1;
					}
				}
			},
			checkEmail(){
				let that = this;
				if(that.email == '') {
					uni.showToast({
						title: '邮箱为空!',
						icon: 'none'
					})
				} else {
					let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
					if(!emailRegex.test(that.email)) {
						uni.showToast({
							title: '邮箱格式错误!',
							icon: 'none'
						})
					} else {
						uni.request({
							url: 'http://localhost:8080/api/checkEmail',
							method: 'POST',
							data: that.email,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => {
								console.log("emailRes",res);
								if(res.statusCode == 200) {
									if(res.data.data.code == "-1") {
										uni.showToast({
											title: res.data.data.msg,
											icon: 'none'
										})
									} else {
										that.canResgister += 1;
									}
								}
							}
						})
						
						that.canResgister += 1;
					}
				}
			},
			checkMobile(){
				let that = this;
				if(that.mobile == '') {
					uni.showToast({
						title: '手机号码为空!',
						icon: 'none'
					})
				} else {
					let mobileRegex = /^(13[0-9]|14[5|7|9]|15[0-3|5-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[8|9])\d{8}$/;
					
					if(!mobileRegex.test(that.mobile)) {
						uni.showToast({
							title: '手机号码格式有误!',
							icon: 'none'
						})
					} else {
						uni.request({
							url: 'http://localhost:8080/api/checkMobile',
							method: 'POST',
							data: that.mobile,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => {
								console.log("mobileRes",res);
								if(res.statusCode == 200) {
									if(res.data.data.code == "-1") {
										uni.showToast({
											title: res.data.data.msg,
											icon: 'none'
										})
									} else {
										that.canResgister += 1;
									}
								}
							}
						})
					}
				}
			},
			addnUser() {
				let that = this;
				if(that.canResgister == 5) {
					let userData = {
						username: that.username,
						password: that.password,
						email: that.email,
						mobile: that.mobile
					}
					uni.request({
						url: 'http://localhost:8080/api/register',
						data: userData,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							console.log("res",res);
						}
					})
				} else {
					uni.showToast({
						title: '请先完善信息!',
						icon: 'error'
					})
				}
			}
        }
    }
</script>

<style lang="scss">
    .new {
        padding: 100rpx 40rpx;
        background-size: 100% 100%;
        height: 100vh;

        .title {
            font-weight: bolder;
            font-size: 40rpx;
        }

        .form {
            margin-top: 100rpx;

            input {
                border-bottom: 1px solid #d6d6d6;
                margin-bottom: 40rpx;
            }
        }

        .btn {
            margin-top: 100rpx;

            button {
                background-color: #11d77e;
                color: white;
            }

            .tip {
                text-align: right;
                color: gray;
                margin-top: 20rpx;
            }
			
			.warning-tip {
				color: red;
				background-color: #11d77e;
			}
        }
		
		.icon-image {
			width: 28rpx;
			height: 28rpx;
		}
    }
</style>